/* 
 *坐标系组件,在元素上移动鼠标显示 X,Y轴的坐标信息,
 */
<template>
  <div
    ref="XYZCard"
    :style="`width:${width}px;height:${height}px;`"
    class="XYZCard"
    @mousemove="inCardMove($event)"
    @click="click($event)"
  ></div>
</template>

<script>
export default {
  props: {
    width: { type: Number, default: 0 },
    height: { type: Number, default: 0 },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    inCardMove(e) {
      this.$emit("xyzMousemove", e.offsetX, e.offsetY);
    },
    click(e) {
      this.$emit("xyzClick", e.offsetX, e.offsetY);
    },
  },
};
</script>

<style lang="css" scoped>
.XYZCard {
  border: 1px dashed skyblue;
  margin: 0px auto;
  margin-bottom: 20px;
  z-index: 1000;
  background: url(../../assets/xyz.jpg) center center no-repeat;
  background-size: 100% 100%;
}
</style>